<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="dao.LanguagesDAO"%>
<%@page import="dao.DictionariesDAO"%>
<%@page import="blo.LanguagesBLO"%>
<%@page import="blo.DictionariesBLO" %>
<link href="fluid.css" media="screen" type="text/css" rel="stylesheet">
<link href="css/uportal3.css" media="screen" type="text/css" rel="stylesheet">
<%@ taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<script type="text/javascript" src='/${requestScope.contextPath}/scripts/common.js' ></script>
<script type="text/javascript" src='/${requestScope.contextPath}/scripts/jquery-1.4.2.js' ></script>

<link rel="stylesheet" href="/${requestScope.contextPath}/scripts/main.css" type="text/css" />
<link rel="stylesheet" href="/${requestScope.contextPath}/scripts/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="/${requestScope.contextPath}/scripts/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="/${requestScope.contextPath}/scripts/jquery.autocomplete.js"></script>


<%--Autocompleting --%>
</script>
     <script type="text/javascript">
		$(function(){
				   	$('#SelectDictID').change(function(){
				   										
													  	$('#SearchTextBox').unautocomplete().autocomplete('/${requestScope.contextPath}/autoComplete'+$('#SelectDictID').val()+'.jsp');
													  });
				   });
</script>


<%--Function to retain the selections of the dropboxes --%>
<script>
$(function(){
	$('#FromL').val('${result.slFrom}');
});

$(function(){
	$('#ToL').val('${result.slTo}');
});
</script>

<%--Function to load a JSP page, bring dynamic content to the page --%>
<!--<script>
	$(function(){
			$('#nanana').load('/${requestScope.contextPath}/AvailableL.jsp');
		});
</script>

--><%--Hook a loading function to an event, load JSP page when it triggered --%>
<script type="text/javascript">
      $(function(){
			        $('#FromLang').change(function(){
			            var FromID = $(this).val();
			            $('#ToLang').load('/${requestScope.contextPath}/AvailableL.jsp', { LangID: FromID } 
			                    		 );
			          })
			          .change();
      			  }
      );
</script>
<script type="text/javascript">
		$(function(){$('#DictSelection,#DictSelectDiv').hide();}); 
		var LangMode=1;
</script>

<script type="text/javascript">
	function DMode(){
			$('#Lselection').hide();
			$('#FromLang').hide();
			$('#ToLang').hide();
			$('#DictSelection').show();
			$('#DictSelectDiv').show();
			LangMode =0;
			$('#SearchTextBox').unautocomplete().autocomplete('/${requestScope.contextPath}/autoComplete'+$('#SelectDictID').val()+'.jsp');
	}
	function LMode(){
			$('#Lselection').show();
			$('#FromLang').show();
			$('#ToLang').show();
			$('#DictSelection').hide();
			$('#DictSelectDiv').hide();
			LangMode=1;
			$('#SearchTextBox').unautocomplete();
	}
</script>

<script type="text/javascript">
	function Translate(){
			var varFrom = $('#FromLang').val();
			var varTo = $('#ToL').val();
			var Word = $('#SearchTextBox').val();
			var DictID= $('#SelectDictID').val();
			$('#MeaningDiv').load('/${requestScope.contextPath}/Translation.jsp',{From: varFrom, To: varTo, LMode: LangMode, DictionaryID: DictID, WInput: Word});
		}
	$(function(){
			$('#TranslateB').click(function(){ Translate();})
		})
</script>
<style type="text/css">  
     .divScroll-1 {    height:100px;    width:200px;    overflow:scroll;    }
       .divScroll-2 {    height:100px;    width:200px;    overflow:scroll;    white-space:nowrap;    } 
      .divScroll-3 {    height:300px;    width:500px;    overflow:scroll;    white-space:nowrap;    }
       .divScrollAuto {    height:100px;    width:200px;    overflow:auto;    white-space:nowrap;    }        						
 </style>

<form  name="<portlet:namespace/>LookUpWord" action="<portlet:actionURL/>" method="POST">
<input name="eventId" type="hidden" />
<input name="screenId" type="hidden" value="searchword"/> 
<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0" bgcolor="#66CCFF" height="22">
<tr>
<td>Hello: ${sessionScope.username}!
<p align="right">

<c:if test="${sessionScope.userrole == -1}">
<input name="btnContribute" value="Contribute" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>", "LookUpWord", "contribute");' type="button" />
<input name="btnLogin" value="Login" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "login");' type="button"/>
</c:if>

<c:if test="${sessionScope.userrole == 0}">
<input name="btnContribute" value="Contribute" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>", "LookUpWord", "contribute");' type="button" />
<input name="btnLogout" value="Logout" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "logout");' type="button"/>
</c:if>

<c:if test="${sessionScope.userrole == 1 or sessionScope.userrole == 2}">
<input name="btnContribute" value="Contribute" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>", "LookUpWord", "contribute");' type="button" />
<input name="btnLogout" value="Logout" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "logout");' type="button"/>
<input name="btnManagerHome" value="Manager Home" style="width: 83;height:25" onclick='submitAction("<portlet:namespace/>","LookUpWord", "managerhome");' type="button"/>
</c:if>


</td>
</tr>
</table>
</form>
<table width=100%>
<tbody>
<tr>
<td>
<input name="mode" onclick="LMode()" type="radio" checked="checked" value="1">Language Mode
<input name="mode" onclick="DMode()" type="radio" value="dict">Dictionary Mode
<table>
<tbody>
<tr>
<td>
<div id="modeshowed" align="left">
<table>
						<tbody><tr>
							<td>
								<table id="Lselection">
									<tbody>
									<tr>
										<td align="right">From:</td>
									</tr>
									<tr>
										<td align="right">To:</td>
									</tr>
									</tbody>
								</table>
								<table  id="DictSelection">
									<tbody>
										<tr>
											<td align="right">DictName:</td>
										</tr>
									</tbody>
									
								</table>
									</td>
									<td>
								<table>
									<tbody>
									<tr>
										<td align="left">
										    <select style="width: 150px;" name="slFrom" id="FromLang">
										        <%
										            LanguagesBLO bloLanguages = new LanguagesBLO();
										            out.print(bloLanguages.getListHTML()); 								        
										        %>
										    </select>
    									</td>
									</tr>
									<tr>
										<td align="left"><div id="ToLang"></div></td>
									</tr>
									<tr>
										<td align="left">
											<div id="DictSelectDiv">
										    <select style="width: 150px;" name="" id="SelectDictID">
										        <%
										            DictionariesBLO DBLO = new DictionariesBLO();
										            out.print(DBLO.getDictListHTML()); 								        
										        %>
										    </select>
											</div>
										</td>
									</tr>
		
								</tbody></table>
							</td>
							<td>
								&nbsp;</td>
						</tr>
						
					</tbody>
                    
                    </table>
</div>
</td>
</tr>

</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<table>
    <tbody>
<tr>
<td align="right">Word:</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td align="right">
<input id="SearchTextBox" name="txtWord" value="${result.txtWord }" style="width: 145px;"type="text">
<button id="TranslateB" onclick="">Translate</button>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td></td>

<td><table><tbody><tr><td align="right"><div id="wordList"><table><tbody><tr>
<td valign="top">

</td>
<td valign="top" width="100%"><div align=left id="MeaningDiv" class="divScroll-3">
				<pre><font color="red">${result.txtmeaning}</font></pre>

</div>
<div align="right">
<pre><a href="#">PLAYSOUND</a></pre>
</div>
</td></tr></tbody></table>
</div></td></tr></tbody></table></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td height="36">&nbsp;
</td>
</tr>
</tbody></table>

<br>

<div id="Translation"></div>
